<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="16">
          <div style="width: 100%; height: 500px;" ref="shelve"></div>
        </el-col>
        <el-col :span="8">
          <div style="width: 100%; height: 500px;" ref="warehouse"></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="workList" border>
            <el-table-column label="No" type="index"></el-table-column>
            <el-table-column label="时间" prop="time" min-width="200"></el-table-column>
            <el-table-column label="入库数量" prop="pushCount" min-width="200"></el-table-column>
            <el-table-column label="出库数量" prop="pullCount" min-width="200"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        shelve: '',
        warehouse: '',
        warehouseName: '',
        warehouseTaskData: [],
        warehouseDataList: [],
        shelveDataList: [],
        workList: []
      }
    },
    mounted() {
      this.getBoxDetail()
    },
    methods: {
      async getBoxDetail() {
        const res = await this.$apiUtil.get('board/countBox7Days', {})
        console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.warehouseTaskData = res.data
        // 封装饼图数据
        for (let i = 0, len = res.data.length; i < len; i++) {
          const warehouseData = {}
          warehouseData.name = res.data[i].wareHouseName
          warehouseData.value = 0
          for (let j = 0, len = res.data[i].countDateVOList.length; j < len; j++) {
            warehouseData.value += res.data[i].countDateVOList[j].datePullCount
            warehouseData.value += res.data[i].countDateVOList[j].datePushCount
          }
          this.warehouseDataList.push(warehouseData)
        }
        // 封装货架数据
        this.warehouseName = res.data[0].wareHouseName
        this.shelveDataList.push(['type', '入库', '出库'])
        for (let i = 0, len = res.data[0].countDateVOList.length; i < len; i++) {
          this.shelveDataList.push([res.data[0].countDateVOList[i].datestr, res.data[0].countDateVOList[i].datePushCount, res.data[0].countDateVOList[i].datePullCount])
        }
        // 封装列表数据
        for (let i = 6; i >= 0; i--) {
          const work = {}
          work.time = res.data[0].countDateVOList[i].datestr
          work.pushCount = 0
          work.pullCount = 0
          for (let j = 0, len = res.data.length; j < len; j++) {
            work.pushCount += res.data[j].countDateVOList[i].datePushCount
            work.pullCount += res.data[j].countDateVOList[i].datePullCount
          }
          this.workList.push(work)
        }
        this.initShelve()
        this.initWarehouse()
        this.$erd.listenTo(this.$refs.shelve, (element) => {
          this.shelve.resize()
        })
        this.$erd.listenTo(this.$refs.warehouse, (element) => {
          this.warehouse.resize()
        })
      },
      initShelve() {
        this.shelve = this.$echarts.init(this.$refs.shelve)
        this.shelve.setOption({
          title: {
            text: this.warehouseName
          },
          legend: {},
          tooltip: {},
          dataset: {
            source: this.shelveDataList
          },
          xAxis: {
            type: 'category'
          },
          yAxis: {},
          series: [{
              type: 'bar'
            },
            {
              type: 'bar'
            }
          ]
        })
      },
      initWarehouse() {
        this.warehouse = this.$echarts.init(this.$refs.warehouse)
        this.warehouse.setOption({
          title: {
            text: '仓库出入库统计',
            subtext: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          series: [{
            name: '仓库',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: this.warehouseDataList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        })
        this.warehouse.on('click', this.warehousePieClick)
      },
      warehousePieClick(param) {
        const index = this.warehouseTaskData.map(item => item.wareHouseName).indexOf(param.name)
        // 封装货架数据
        this.warehouseName = this.warehouseTaskData[index].wareHouseName
        this.shelveDataList = []
        this.shelveDataList.push(['type', '入库', '出库'])
        for (let i = 0, len = this.warehouseTaskData[index].countDateVOList.length; i < len; i++) {
          this.shelveDataList.push([this.warehouseTaskData[index].countDateVOList[i].datestr, this.warehouseTaskData[index].countDateVOList[i].datePushCount, this.warehouseTaskData[index].countDateVOList[i].datePullCount])
        }
        this.initShelve()
      }
    }
  }
</script>

<style lang="less" scoped>
</style>
